 <template>
 
    <div id="case" class="case"> 
         <div class="flex">
                <p>所在位置：</p>
                <p>合同</p>
                <p><i class="el-icon-arrow-right"></i></p>
                <P v-for="(v,i) in arr" :key="i+'a'" v-show="$store.state.case.child_id  == i">
                    {{v.Item_Name}}
                </P>
                <!-- <p v-show="child_cur == 0">律所案件</p>
                 <p v-show="child_cur == 1">分所案件</p>
                  <p v-show="child_cur == 2">部门案件</p>
                   <p v-show="child_cur == 3">个人案件</p>
                   <p v-show="child_cur == 4">授权案件</p> -->
            </div>
       <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> -->
           
            <!-- <transition-group tag="ul" name="slide" class="flex_ul"> -->
              <ul class="flex_ul">
            <router-link  tag='li'   v-for="(v,i) in arr" :key="i"  :to="'/index/contractoutIndex/'+v.Item_Path" class="flex_li" active-class="linkClass" @click.native="handleClick(i)">
            <p>{{v.Item_Name}}</p>
            <span></span>
            </router-link>
            </ul>
          <!-- </transition-group> -->
            <div class="flex case-child" >  
            </div>
            <div class="showTab">
            <ul class="showTab-ul">
              
              <li class="showTab-li">
                <!-- <transition mode="out-in"> -->
                <router-view></router-view>
                <!-- </transition> -->
                 </li>
              </ul>
            </div>
           
        
          
        <!-- </el-tabs>  -->
    </div>

</template>
<script>
import store from '../../vuex/store'

  export default {
    data() {
      return {
          arr:[], 
      }
    },
    methods: {
        handleClick(tab) {
          this.$store.commit('changeCaseChild',tab)
        },
        getChildMenu(){
          this.$http.get('/yongxu/Base/User_Two_Menu',{params:{
            Menu_Id:47,
            User_Id:localStorage.getItem('userId')
          }}).then((res)=>{
            this.arr = res.data
            console.log(this.arr)
            var menuArr = []
            for(var i =0 ;i<this.arr.length;i++){
              menuArr[i] ='/index/contractoutIndex/'+this.arr[i].Item_Path
            }
            this.$router.push({path:'/index/contractoutIndex/'+this.arr[this.$store.state.case.child_id].Item_Path})
            this.getActiveMenu()
          })
        },
        getActiveMenu(){
          var menuArr = []
          for(var i =0 ;i<this.arr.length;i++){
              menuArr[i] ='/index/contractoutIndex/'+this.arr[i].Item_Path
          }
          var i =menuArr.indexOf(this.$route.path)
          this.menu_i = i
          this.activeName = 'name'+i
        },
    },
    mounted(){
      this.getChildMenu()
         
    },
  };
</script>
<style>
@import '../../assets/sass/main.css';
.flex_ul{
  width: 100%;
  display: flex;
  flex: row;
  justify-content: center;
  height: 40px;
  line-height: 40px;
}
.flex_li{
  display: flex;
  color: #333333;
  font-size: 14px;
  width:90px;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.flex_li p{
   cursor: pointer;
}

.linkClass{
      color: #7E2C2E;
}
.linkClass p {
      color: #7E2C2E;
      display: flex;
}
.linkClass  span{
  display: block;
  width: 70px;
  text-align: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #7E2C2E;
}
   .v-enter,.v-leave-to{
            opacity:  0;/*透明度*/
            transform: translateX(150px);
        }
         /*入场(离场)动画的时间段   */
        .v-enter-active,.v-leave-active{
            transition: all 0.8s ease;

        }
        .my-enter,.my-leave-to{
            opacity:  0;/*透明度*/
            transform: translateY(70px);
        }
        .my-enter-active,.my-leave-active{
            transition: all 0.8s ease;

        }
</style>


